﻿@model IEnumerable<SampleAjaxMvc.Models.Artista>
@{
    ViewBag.Title = "Artistas";
}
<script type="text/javascript">

    function clearForm(form) {
        $("#" + form + " input").each(function () {
            switch (this.type) {
                case 'password':
                case 'select-multiple':
                case 'select-one':
                case 'text':
                case 'textarea':
                    $(this).val('');
                    break;
                case 'checkbox':
                case 'radio':
                    this.checked = false;
            }
        });
    }

    function addRow(artista) {

        var row = '<tr id="' + artista.Id + '">';
        row = row.concat('<td title="Nome">', artista.Nome, '</td>');
        row = row.concat('<td title="Sobrenome">', artista.Sobrenome, '</td>');
        row = row.concat('<td>');
        row = row.concat('<a rel = "Edit" title = "', artista.Id,'" href="/ajaxmvc/Artista/Edit/', artista.Id, '">Edit</a> | ');
        row = row.concat('<a rel = "Details" title = "', artista.Id,'" href="/ajaxmvc/Artista/Details/', artista.Id, '">Details</a> | ');
        row = row.concat('<a rel = "Delete" title = "', artista.Id,'" href="/ajaxmvc/Artista/Delete/', artista.Id, '">Delete</a>');
        row = row.concat('</td>');
        row = row.concat('</tr>');

        return row;
    }

    $(document).ready(function () {
        $("#CreateEdit").hide();

        $("#Index a").click(function () {

            if ($(this).attr('rel') == 'Edit') {
                
                $.ajax({
                    type: "POST",
                    url: "Artista/GetItem/" + $(this).parent().parent().attr("Id"),
                    dataType: "json",
                    success: function (data) {
                        if (data != null) {
                            $("#CreateEdit_artista #Id").val(data.Id);
                            $("#CreateEdit_artista #Nome").val(data.Nome);
                            $("#CreateEdit_artista #Sobrenome").val(data.Sobrenome);
                        }

                        $("#CreateEdit :submit").attr("Id", "Edit");
                        $("#CreateEdit_artista").attr("action", "Artista/Edit");
                        $("#CreateEdit :submit").text("Salvar");
                        $("#Index").hide();
                        $("#CreateEdit").show();
                    },

                    error: function () {
                        alert("fudeu");
                    }
                });
            }
            else if ($(this).attr('rel') == 'Details')
                alert('DT');
            else if ($(this).attr('rel') == 'Delete')
                alert('DE');

            return false;
        });

        $("#edit").submit(function () {
            alert('Salvar');

            return false;
        });

        $("#Cadastrar").click(function () {
            $("#CreateEdit :submit").attr("Id", "Create");
            $("#CreateEdit_artista").attr("action", "Artista/Create");
            $("#CreateEdit :submit").text("Criar");
            $("#Index").hide();
            $("#CreateEdit").show();
            return false;
        });

        $("#Listar").click(function () {
            $("#Index").show();
            $("#CreateEdit").hide();
        });

        $("#CreateEdit_artista").submit(function () {
            //event.preventDefault();
            //TODO: Verificar a utilização do jQuery Form Plugin (http://jquery.malsup.com/form/)

            //            $.post($(this).attr("action"), $(this).serialize(), function (data) {
            //                if (data.Success) {
            //                    alert(data.Message);
            //                    $("#lista tbody").append(addRow(data.Obj));
            //                    clearForm("cad_artitsta");
            //                    $("#criar").show();
            //                    $("#listar").hide();
            //                    $("#lista").show();
            //                    $("#cad_artitsta").hide();
            //                }
            //                else {
            //                    alert(data.Message);
            //                }
            //            });


            if ($("#CreateEdit :submit").attr("Id") == "Create")
                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"),
                    data: $(this).serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Success) {
                            alert(data.Message);
                            $("#lista tbody").append(addRow(data.Obj));
                            clearForm("CreateEdit_artista");
                            $("#Index").show();
                            $("#CreateEdit").hide();
                        }
                        else {
                            alert(data.Message);
                        }
                    },

                    error: function () {
                        alert("fudeu");
                    }
                });

            else if ($("#CreateEdit :submit").attr("Id") == "Edit")
                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"),
                    data: $(this).serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Success) {
                            alert(data.Message);
                            clearForm("CreateEdit_artista");
                            $("#lista #" + data.Obj.Id + " td[title = 'Nome']").html(data.Obj.Nome);
                            $("#lista #" + data.Obj.Id).find("td[title = 'Sobrenome']").html(data.Obj.Sobrenome);
                            $("#Index").show();
                            $("#CreateEdit").hide();
                        }
                        else {
                            alert(data.Message);
                        }
                    },

                    error: function () {
                        alert("fudeu");
                    }
                });

            return false;
        });
    });

</script>
<div id="Index">
<h2>
    Cadastro de Artistas</h2>
<p>
    @*@Html.ActionLink("Cadastrar", "Create", "Artista", new { id = "criar" })*@
    <a href="#" id="Cadastrar">Cadastrar</a>
</p>
    <table id="lista">
        <tr>
            <th>
                Nome
            </th>
            <th>
                Sobrenome
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr id="@item.Id" >
                <td title="Nome">
                    @Html.DisplayFor(modelItem => item.Nome)
                </td>
                <td title="Sobrenome">
                    @Html.DisplayFor(modelItem => item.Sobrenome)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { rel = "Edit", title = item.Id }) |
                    @Html.ActionLink("Details", "Details", new { id = item.Id }, new { rel = "Details", title = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id }, new { rel = "Delete", title = item.Id })
                </td>
            </tr>
        }
    </table>
</div>
@*<div id="create">
    <form method="post" action="Artista/Create" id="cad_artitsta">
        <fieldset>
            <legend>Artista</legend>
            <div class="editor-label">
                <label>
                    Nome:</label>
            </div>
            <div class="editor-field">
                <input type="text" id="Nome" name="Nome" value="" />
            </div>
            <div class="editor-label">
                <label>
                    Sobrenome:</label>
            </div>
            <div class="editor-field">
                <input type="text" id="Sobrenome" name="Sobrenome" value="" />
            </div>
            <p>
                <button type="submit" id="cadastrar">
                    Cadastrar</button>
            </p>
        </fieldset>
    </form>
</div>*@
@Html.Partial("Edit")
